<template>
  <div>
    <div ref="editorContainer"></div>
    <el-button @click="cliceB">点击输出</el-button>
  </div>

</template>

<script>
import E from 'wangeditor';

export default {
  name: 'WangEditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    // ... 其他 props
  },
  data() {
    return {
      editor: null, // 用于存储 wangEditor 实例
      //配置工件栏
      toolbarConfig: [ // 自定义工具栏配置
        'head',
        'bold',
        'italic',
        // ... 其他你需要的按钮
      ]
    };
  },

  mounted() {
    this.initEditor();
  },
  beforeDestroy() {
    // 组件销毁前，销毁 wangEditor 实例
    if (this.editor) {
      this.editor.destroy();
      this.editor = null;
    }
  },
  watch: {
    // 监听 value 的变化，并更新编辑器内容
    value(newVal, oldVal) {
      if (this.editor && newVal !== oldVal) {
        this.editor.txt.html(newVal);
      }
    },
  },
  methods: {
    // 初始化 wangEditor
    initEditor() {
      this.editor = new E(this.$refs.editorContainer);
      this.editor.create();
    },
    //
    cliceB(){
      let cont=this.editor.txt.html()
      console.log(cont)
    }
  },

};
</script>